<template>
	<div class="chartPage">
		<div class="chartPanel">
			<v-myChart></v-myChart>
		</div>
	</div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
import realTimeStatus from '@/store/dashboard/realTimeStatus';
import vMyChart from '@/components/page/dashboard/realTimeStatus/myChartTwo';

export default {
	components: {
		vMyChart,
	},
	data() {
		return {
			alertInfo: {
				message: '',
				type: ''
			}
		}
	},
	created() {
		this.$store.registerModule(['dashboard', 'realTimeStatus'], realTimeStatus);
	},
	computed: {
		...mapState('dashboard/realTimeStatus', {
			getAlertInfo: function (state) {
				this.alertInfo = {...state.alertInfo};
			}
		})
	},
	watch: {
		'alertInfo': {
			handler: function(val) {
				if (val.message) {
					console.log('show');
					this.$message(val);
					this.alertInfo = {
						message: '',
						type: ''
					};
				}
			}
		}
	},
	destroyed() {
		this.$store.unregisterModule(['dashboard', 'realTimeStatus']);
	}
};
</script>

<style scoped>
.chartPage {
	height: 100%;
}
.chartPanel {
	height: 100%;
	overflow: hidden;
}
</style>
